<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻资讯</title>
    <link href="oldcss/index2020.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/news.css">
    <script src=""></script>
</head>

<body>

    <!-- nav 条 -->
    <div class="news-banner">
        <div class="news-banner-main base-width">
            <span>头条</span>
            <span>要闻</span>
            <span>会展</span>
        </div>
    </div>
    <!-- banner条图 -->
    <div class="news-img-banner base-width">
        <img src="https://img0.baidu.com/it/u=1088917052,623552442&fm=26&fmt=auto" alt="" srcset="">
    </div>
    <!-- 头条 -->
    <div class="news-topline base-width">
        <p class="topline-title">这是标题：很大的一行字</p>
        <p class="topline-list">
            <span><span>◆</span>第一个关键字</span>
            <span><span>◆</span>第二个关键字</span>
            <span><span>◆</span>第三个关键字</span>
        </p>
        <div class="topline-more">更多头条</div>
    </div>

    <!-- 24小时资讯 -->
    <main class="main-24houer base-width">
        <div class="houer24-l">
            <p><img src="img/news/h24.png" alt="" srcset=""></p>
            <ul class="houer24-ul">
                <li class="houer-item">
                    <p class="houer24-p eclips2">这就是那个标题，只能占两行，占三行会被隐藏超出部分。你看看是不是</p>
                    <p class="houer24-time">3小时前</p>
                </li>
                <li class="houer-item">
                    <p class="houer24-p eclips2">这就是那个标题，只能占两行，占三行会被隐藏超出部分。</p>
                    <p class="houer24-time">3小时前</p>
                </li>
                <li class="houer-item">
                    <p class="houer24-p eclips2">这就是那个标题，只能占两行，占三行会被隐藏超出部分。</p>
                    <p class="houer24-time">3小时前</p>
                </li>
                <li class="houer-item">
                    <p class="houer24-p eclips2">这就是那个标题，只能占两行，占三行会被隐藏超出部分。</p>
                    <p class="houer24-time">3小时前</p>
                </li>
            </ul>
        </div>
        <div class="houer24-m">
            <img id="scrollImg_0" src="https://img1.baidu.com/it/u=1124520378,3095507368&fm=26&fmt=auto" alt="">
            <img id="scrollImg_1" class="hide" src="https://img2.baidu.com/it/u=586607866,2734281005&fm=26&fmt=auto"
                alt="">
            <img id="scrollImg_2" class="hide" src="https://img1.baidu.com/it/u=35233464,1442703426&fm=26&fmt=auto"
                alt="">
            <img id="scrollImg_3" class="hide" src="https://img2.baidu.com/it/u=1987088077,1788287366&fm=26&fmt=auto"
                alt="">
            <div class="news-scroll-tools">
                <div class="scroll-info eclips">
                    <span id="scrollInfo_0">图片的解释图片的解释图片的解释图片的解释图片的解释图片的解释</span>
                    <span id="scrollInfo_1" class="hide">图片的解释</span>
                    <span id="scrollInfo_2" class="hide">图片的解释</span>
                    <span id="scrollInfo_3" class="hide">图片的解释</span>
                </div>
                <div class="scroll-tools">
                    <span id="scrollBtn_0" onclick="changeScroll(0)" class="active"></span>
                    <span id="scrollBtn_1" onclick="changeScroll(1)"></span>
                    <span id="scrollBtn_2" onclick="changeScroll(2)"></span>
                    <span id="scrollBtn_3" onclick="changeScroll(3)"></span>
                </div>
            </div>
        </div>
        <div class="houer24-r">
            <div><img src="https://img0.baidu.com/it/u=1088917052,623552442&fm=26&fmt=auto" alt=""></div>
            <div><img src="https://img0.baidu.com/it/u=1088917052,623552442&fm=26&fmt=auto" alt=""></div>
        </div>
    </main>
    <!-- 要闻 -->
    <div class="news-import base-width">
        <div class="import-title">
            <div class="import-title-text">要闻</div>
            <div class="import-title-r">
                <div class="in-title-r">
                    <div class="import-r-title">地方新闻</div>
                    <div class="import-more">更多 ></div>
                </div>
            </div>
        </div>
        <div class="import-mian">
            <div class="import-l">
                <div class="import-l-t">
                    <img src="https://img0.baidu.com/it/u=1088917052,623552442&fm=26&fmt=auto" alt="" srcset="">
                    <p class="eclips">第一张图片</p>
                </div>
                <div class="import-l-b">
                    <div>
                        <img src="https://img0.baidu.com/it/u=1088917052,623552442&fm=26&fmt=auto" alt="">
                        <p class="eclips2">下面的两张图片</p>
                    </div>
                    <div>
                        <img src="https://img0.baidu.com/it/u=1088917052,623552442&fm=26&fmt=auto" alt="">
                        <p class="eclips2">下面的两张图片</p>
                    </div>
                </div>
            </div>
            <div class="import-m">
                <ul>
                    <li class="eclips weight">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                    <li class="eclips weight">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                    <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                    <li class="eclips weight">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                    <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                    <li class="eclips weight">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                    <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                    <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                    <li class="eclips weight">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                    <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                    <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                    <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                    <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                    <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                </ul>
            </div>
            <div class="import-r">
                <div class="import-r-img">
                    <img src="https://img0.baidu.com/it/u=1088917052,623552442&fm=26&fmt=auto" alt="">
                    <div class="import-img-info">
                        <div class="import-hot">HOT</div>
                        <div class="import-img-msg eclips">要闻右侧的7条新闻上面，支持单行文字，超出部分隐藏！</div>
                    </div>
                </div>
                <ul>
                    <li class="eclips">要闻右侧的7条新闻，支持单行文字，超出部分隐藏！</li>
                    <li class="eclips">要闻右侧的7条新闻，支持单行文字，超出部分隐藏！</li>
                    <li class="eclips">要闻右侧的7条新闻，支持单行文字，超出部分隐藏！</li>
                    <li class="eclips">要闻右侧的7条新闻，支持单行文字，超出部分隐藏！</li>
                    <li class="eclips">要闻右侧的7条新闻，支持单行文字，超出部分隐藏！</li>
                    <li class="eclips">要闻右侧的7条新闻，支持单行文字，超出部分隐藏！</li>
                    <li class="eclips">要闻右侧的7条新闻，支持单行文字，超出部分隐藏！</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 会展 -->
    <div class="news-exbition base-width">
        <div class="import-title">
            <div class="import-title-text">会展</div>
            <div class="import-title-r">
                <div class="in-title-r">
                    <div class="import-more">更多 ></div>
                </div>
            </div>
        </div>
        <div class="exbition-main">
            <div class="exbition-row">
                <div class="row-l">
                    <img src="https://img0.baidu.com/it/u=1088917052,623552442&fm=26&fmt=auto" alt="">
                    <div class="exbition-img-info eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</div>
                </div>
                <div class="row-m">
                    <ul>
                        <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                        <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                        <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                        <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                        <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                        <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                        <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                    </ul>
                </div>
                <div class="row-r">
                    <ul>
                        <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                        <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                        <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                        <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                        <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                        <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                        <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                    </ul>
                </div>
            </div>
            <div class="exbition-row">
                <div class="row-l">
                    <img src="https://img0.baidu.com/it/u=1088917052,623552442&fm=26&fmt=auto" alt="">
                    <div class="exbition-img-info eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</div>
                </div>
                <div class="row-m">
                    <ul>
                        <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                        <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                        <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                        <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                        <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                        <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                        <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                    </ul>
                </div>
                <div class="row-r">
                    <ul>
                        <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                        <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                        <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                        <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                        <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                        <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                        <li class="eclips">要闻中间的14条新闻，支持单行文字，超出部分隐藏！要闻中间的14条新闻，支持单行文字，超出部分隐藏！</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    var nowShowItem = 0
    var interv
    function changeScroll(i) {
        nowShowItem = i
        var img = $('#scrollImg_' + i)
        var info = $('#scrollInfo_' + i)

        img.fadeIn()
        img.siblings('img').fadeOut()

        info.show()
        info.siblings('span').hide()

        $('#scrollBtn_' + i).addClass('active')
        $('#scrollBtn_' + i).siblings('span').removeClass('active')

        clearInterval(interv)
        interv = setInterval(function () {
            nowShowItem = nowShowItem + 1 > 3 ? 0 : nowShowItem + 1
            changeScroll(nowShowItem)
        }, 10 * 1000)
    }

    interv = setInterval(function () {
        nowShowItem = nowShowItem + 1 > 3 ? 0 : nowShowItem + 1
        changeScroll(nowShowItem)
    }, 10 * 1000)

</script>

</html>